<template>
  <div>
    <el-row class="row" :gutter="20">
      <el-col :span="16">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/teacher' }">教师菜单</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/teacher/choice' }">选题管理</el-breadcrumb-item>
          <el-breadcrumb-item>选题详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row class="card" :gutter="20">
      <el-col :span="8" v-if="studentChoice">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>课题信息</span>
            <el-button style="float: right;" size="small" type="primary" plain round @click="showTeacherAssign">指定评阅教师</el-button>
          </div>
          <div class="card-body">
            <div class="topic-card">
              <el-row class="card-row" :gutter="20">
                <el-col>学生姓名：{{studentChoice.stuName}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>学生学号：{{studentChoice.stuNo}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>课题编号：{{studentChoice.topNo}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>课题名称：{{studentChoice.topName}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>课题性质：{{studentChoice.topProperty}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>课题类别：{{studentChoice.topCategory}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>所属学院：{{studentChoice.colName}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>选题状态：
                  <span style="color: #ff6767">{{studentChoice.choStateDesc}}</span>
                </el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>选题时间：{{studentChoice.gmtCreate}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>修改时间：{{studentChoice.gmtModify}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>课题内容：</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>
                  <el-input type="textarea" :rows="8" v-model="studentChoice.topContent" :disabled="true"></el-input>
                </el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>下载附件：
                  <el-button icon="el-icon-download" type="text" @click="download(studentChoice.choAttach)">{{studentChoice.choAttach}}</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" v-for="(studentComment,index) in studentCommentList" :key="index">
        <el-card class="box-card">
          <div slot="header">
            <span>教师评阅</span>
            <span style="float: right;">评阅教师：
              <el-button type="text" @click="showTeacherInfo(studentComment.teaNo)">{{studentComment.teaName}}</el-button>
            </span>
          </div>
          <div class="card-body">
            <el-row class="card-row" :gutter="20">
              <el-col>
                <div style="color:#ff6767;font-size: 80px; text-align: center; margin-bottom: 5%;  margin-top: 10%">{{studentComment.comScore? studentComment.comScore: '--'}}</div>
              </el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>评阅编号：{{studentComment.comNo}}</el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>评阅状态：{{studentComment.comStateDesc}}</el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>指定时间：{{studentComment.gmtCreate}}</el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>更新时间：{{studentComment.gmtModify}}</el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>评阅内容：</el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>
                <el-input type="textarea" :rows="8" v-model="studentComment.comContent" :disabled="true"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <teacher-assign :visible.sync="teacherAssignVisible" :choNo="studentChoice.choNo" />
    <teacher-info :teaNo="teaNo" :visible.sync="profileVisible" />
  </div>
</template>

<script>
import TeacherAssign from './TeacherAssign'
import TeacherInfo from './TeacherInfo'
export default {
  name: 'TeacherChoiceDetail',
  components: {
    TeacherAssign,
    TeacherInfo
  },
  data () {
    return {
      teacherAssignVisible: false,
      studentChoice: {},
      studentCommentList: [],
      teaNo: '',
      profileVisible: false
    }
  },
  methods: {
    // 获取学生课题信息
    getStudentContent () {
      this.$axios.get(`/api/student/${this.$route.params.id}/choice`)
        .then(response => {
          let result = response.data
          if (result.success) {
            this.studentChoice = result.data
            console.log(this.studentChoice)
            this.listStudentComment()
          } else {
            this.$message.error(result.msg)
          }
        })
    },
    // 获取选题对应评阅信息
    listStudentComment () {
      this.$axios.get('/api/choice/' + this.studentChoice.choNo + '/comment')
        .then(response => {
          let result = response.data
          if (result.success) {
            this.studentCommentList = result.data
          } else {
            this.$message.info(result.msg)
          }
        })
    },
    showTeacherAssign () {
      console.log('showTeacherAssign')
      this.teacherAssignVisible = true
    },
    showTeacherInfo (teaNo) {
      this.teaNo = teaNo
      this.profileVisible = true
    },
    download (choAttach) {
      this.$axios({
        url: `/api/storage/file/${choAttach}`,
        method: 'get',
        responseType: 'blob'
      }).then(response => {
        // 创建隐藏的可下载链接
        var eleLink = document.createElement('a')
        eleLink.download = choAttach
        eleLink.style.display = 'none'
        // 字符内容转变成blob地址
        var blob = new Blob([response.data])
        eleLink.href = URL.createObjectURL(blob)
        // 触发点击
        document.body.appendChild(eleLink)
        eleLink.click()
        // 然后移除
        document.body.removeChild(eleLink)
      })
    }
  },
  mounted () {
    this.getStudentContent()
  }
}
</script>

<style lang="stylus" scoped>
.row {
  margin: 20px;
}

.card-body {
  height: 550px;
}

.card-row {
  margin-bottom: 10px;
}
</style>
